<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title id="t1">计算属性</title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
	</script>
	
</head>
<body>
	<div><h2>计算属性：相当于缓存！！在内存中执行，节省系统计算开销，避免模板太多计算导致页面加载慢</h2></div>
	<div id="app1">
		{{msg}} <br>
		Method : CurrentDateTime is {{fun1()}}<br>
		Computed : CurrentDateTime is {{currDate}}
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var data = {
				msg:"Hi There!"
			}
		// new Vue({}) 大小写敏感
		var app = new Vue({
			el:"#app1",
			data:data,
			methods:{
				fun1:function(){
					return Date.now();
				}
			},
			computed:{ 
				currDate:function(){
					this.msg;
					return Date.now();
				}
			}
		})
	</script>

</body>
</html>